<template>
  <div class="sort-item" v-for="(item, i) in sortList" :key="i" @click="updateSort(item, i)">
    <van-icon class="left" size="18" :name="item.icon" :color="item.color" />
    <div class="right">
        <div :class="['text', index === i ? 'active' : '']">{{ item.name }}</div>
        <van-icon v-if="index === i" size="18" class="success" name="success" color="#0a92e7" />
    </div>
  </div>
</template>

<script setup>
import { defineProps, ref, defineEmits } from 'vue'
defineProps({
  sortList: {
    type: Array,
    default: () => ([])
  }
})
const emit = defineEmits(['newSort'])

// 点击选中排序方式
const index = ref(0)
const updateSort = (item, i) => {
  index.value = i
  emit('newSort', item)
}
</script>

<style scoped lang="less">
.sort-item {
    display: flex;
    justify-content: space-between;
    height: 120px;
    background-color: #fff;
    .left {
        flex: 1;
        text-align: center;
        line-height: 120px;
    }
    .right {
        display: flex;
        justify-content: space-between;
        border-right: 1px solid #e4e4e4;
        flex: 6;
        line-height: 120px;
        .text {
            color: #666;
            font-size: 28px;
        }
        .active {
            color: #0a92e7;
        }
        .success {
            margin-right: 20px;
            line-height: 120px;
        }
    }
}
</style>
